<template>
  <div>
    <el-row style="margin:10px 0">
      <el-col :span="12">
        <el-select
          v-model="status"
          clearable
          placeholder="请选择状态"
          @change="selectChange"
          size="small"
        >
          <el-option label="显示" value="1"></el-option>
          <el-option label="隐藏" value="0"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-input
          placeholder="请输入物流公司"
          size="small"
          style="width:200px"
          v-model="title"
          clearable
        >
        </el-input>
        <el-button
          size="small"
          @click="search"
          icon="el-icon-search"
          type="primary"
        ></el-button>
      </el-col>
    </el-row>
    <el-row style="margin:10px 0">
      <el-col :span="24">
        <el-button round size="small" @click="open" type="success"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          height="500"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" label="ID" > </el-table-column>

          <el-table-column
            prop="title"
            label="分类昵称"
            
          ></el-table-column>
          <el-table-column prop="eng_title" label="分类字段" >
          </el-table-column>
          <el-table-column label="状态" prop="status">
            <template slot-scope="scope">
              <Sw
                :isShow="scope.row.status"
                :editId="scope.row.id"
                @switchChange="switchChange"
              ></Sw>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="go({ ...scope.row })"
                >配置列表</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleClick({ ...scope.row })"
                >编辑</el-button
              >
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-delete-solid"
                icon-color="red"
                title="确定删除吗？"
                @confirm="del({ ...scope.row })"
                style="margin-left:5px"
              >
                <el-button slot="reference" type="text" size="small"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <MaintainDialog
      :dialogFormVisible="dialogFormVisible"
      :form="form"
      :title="formTitle"
      :ruleList="ruleList"
      @finish="finish"
    />
  </div>
</template>

<script>
import {
  getClassifyList,
  switchFun,
  delList,
  addCreateClassify,
  confirmAdd,
  editCreateClassify,
  confirmEdit,
} from "../../api/Maintain";
import Sw from "../../components/Sw.vue";
import MaintainDialog from "../../components/MaintainDialog/MaintainDialog.vue";
export default {
  components: { Sw, MaintainDialog },
  data() {
    return {
      loading: false,
      tableData: [],
      status: "",
      page: 1,
      limit: 100,
      title: "",
      total: 0,
      dialogFormVisible: false,
      form: {
        title: "",
        eng_title: "",
        pid: "",
        icon: "",
        type: 0,
        status: 0,
        sort: 0,
      },
      formTitle: "",
      ruleList: [],
    };
  },

  methods: {
    open() {
      const Lo = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      (this.form = {
        title: "",
        eng_title: "",
        pid: "",
        icon: "",
        type: 0,
        status: 0,
        sort: 0,
      }),
        addCreateClassify().then((res) => {
          this.dialogFormVisible = res.data.data.status;
          this.formTitle = res.data.data.title;
          this.ruleList = res.data.data.rules;
          Lo.close();
        });
    },
    go(e) {
      const { id } = e;
      this.$router.push({ path: "/maintain/data", query: { id } });
    },
    handleClick(row) {
      const Lo = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      (this.form = {
        id: row.id,
        title: row.title,
        eng_title: row.eng_title,
        pid: row.pid,
        icon: row.icon,
        type: row.type,
        status: row.status,
        sort: row.sort,
      }),
        editCreateClassify(row.id).then((res) => {
          this.formTitle = res.data.data.title;
          this.dialogFormVisible = res.data.data.status;

          this.ruleList = res.data.data.rules;
          Lo.close();
        });
    },
    switchChange(e) {
      const { is_show, id } = e;
      switchFun({ id, is_show }).then((res) => {
        this.getData();
      });
    },
    selectChange(e) {
      this.status = e;
      this.getData();
    },
    search(e) {
      this.getData();
    },
    del(e) {
      delList(e.id).then((res) => {
        if (res.data.status != 200) {
          this.$message({ type: "error", message: res.data.msg });
          return;
        }
        this.getData();
      });
    },
    getData() {
      this.loading = true;
      const { page, limit, status, title } = this;
      getClassifyList({ status, page, limit, title }).then((res) => {
        console.log(res.data.data);
        this.total = res.data.data.count;
        this.tableData = res.data.data.list;
        this.loading = false;
      });
    },
    finish(e) {
      if (e.id) {
        confirmEdit(e).then((res) => {
          if (res.data.status !== 200) {
            this.$message({ type: "error", message: res.data.msg });
            this.loading = false;
            return;
          }
          this.getData();
          this.dialogFormVisible = false;
        });
      } else {
        this.loading = true;
        confirmAdd(e).then((res) => {
          if (res.data.status !== 200) {
            this.$message({ type: "error", message: res.data.msg });
            this.loading = false;
            return;
          }
          this.getData();
          this.dialogFormVisible = false;
        });
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped></style>
